import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../components/HomeView.vue';
import About from '../components/AboutView.vue';
import Detail1 from '@/views/Detail1.vue';
import Detail2 from '../views/Detail2.vue';
import Detail3 from '../views/Detail3.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'detail1',
        name: 'Detail1',
        component: Detail1,
      },
      {
        path: 'detail2',
        name: 'Detail2',
        component: Detail2,
      },
      {
        path: 'detail3',
        name: 'Detail3',
        component: Detail3,
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
